import React from 'react';

export default class UpInput extends React.Component{
    handleUpImage = (e)=>{
        this.props.onRef()
    }
    changeUpImage = (event)=>{
        this.props.onChangeImgae(event)
    }
    componentDidMount() {
        this.props.parent.changeIptRef(this.file)
    }

    render() {
        return (
            <div>
                <div onClick={event => this.handleUpImage(event)} className={'add-box'}>
                    <input onClick={e=>{
                        // 阻止事件冒泡，（阻止这个合成事件，往document上冒泡，因此不会触发click方法）
                        e.nativeEvent.stopImmediatePropagation()
                        // 阻止合成事件间的冒泡，不会往最外层的div的test方法冒了，如果不加这句代码，就会冒泡至外层div，执行test方法。
                        e.stopPropagation()
                    }} onChange={this.changeUpImage} className={'add'} ref={(el)=> this.file = el } type="file"/>
                </div>
            </div>
        );
    }
}